import { Link } from "@tanstack/react-router";
import { ShieldIcon, UsersRoundIcon } from "lucide-react";
import { Card, CardFooter, CardHeader } from "@/components/ui/card";

export function OrgsListItemCard() {
	return (
		<Link to="/organizations/$id" params={{ id: "123" }}>
			<Card className="group hover:bg-secondary transition-all duration-100 hover:cursor-pointer justify-between gap-0 h-full w-full">
				<CardHeader>
					<div className="flex justify-between w-full">
						<div className="flex gap-3 items-center w-full">
							<div className="aspect-square size-10 flex items-center justify-center rounded-lg text-xl font-semibold bg-accent text-muted-foreground">
								O
							</div>
							<div className="flex flex-col justify-between">
								<span className="text-sm">Organization</span>
								<span className="text-xs text-muted-foreground">slug</span>
							</div>
						</div>
					</div>
				</CardHeader>
				<CardFooter className="text-muted-foreground flex justify-between text-xs">
					<div className="flex items-center justify-between gap-4 w-full">
						<div className="flex items-center gap-1">
							<UsersRoundIcon className="size-4" />
							<p>100</p>
						</div>
						<ShieldIcon className="size-4" />
					</div>
				</CardFooter>
			</Card>
		</Link>
	);
}
